<template>
    <div class="sc-chat-window">
        <Header @close="emits('close')" @zoom="emits('zoom')"> </Header>

        <MessageList
            :messages="messageList"
            @message-click="(btnType) => emits('messageClick', btnType)"
            @tabs-click="(id) => emits('tabsClick', id)"
            @download="(file) => emits('download', file)"
            @reConnect="emits('reConnect')"
            @replyClick="(val) => emits('replyClick', val)"
            @refresh="(val) => emits('refresh', val)"
            @preview="(file) => emits('preview', file)"
        >
        </MessageList>

        <UserInput
            :maxLength="maxLength"
            @sendMessage="(val) => emits('sendMessage', val)"
            @toTicket="emits('toTicket')"
        />

        <img src="@/assets/service.png" class="service" alt="" @click="emits('connectService')" />
    </div>
</template>

<script setup>
import Header from './Header.vue'
import MessageList from './MessageList.vue'
import UserInput from './UserInput.vue'

const props = defineProps({
    maxLength: {
        type: Number,
        required: true,
    },

    messageList: {
        type: Array,
        default: () => [],
    },
})

const emits = defineEmits([
    'close',
    'zoom',
    'download',
    'messageClick',
    'tabsClick',
    'reConnect',
    'replyClick',
    'refresh',
    'sendMessage',
    'preview',
    'connectService',
])
</script>

<style scoped lang="scss">
.sc-chat-window {
    width: 100%;
    height: 100%;

    z-index: 98;
    box-sizing: border-box;
    box-shadow: 0px 7px 40px 2px rgba(148, 149, 150, 0.1);
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 10px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    animation: fadeIn;
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;

    .service {
        position: absolute;
        width: 128px;
        height: 118px;
        right: 0;
        top: 72px;
        z-index: 9;
        cursor: pointer;
    }
}

.sc-chat-window.closed {
    opacity: 0;
    display: none;
    bottom: 90px;
}

@keyframes fadeIn {
    0% {
        display: none;
        opacity: 0;
    }

    100% {
        display: flex;
        opacity: 1;
    }
}

.sc-message--me {
    text-align: right;
}
.sc-message--them {
    text-align: left;
}
</style>
